<template>
  <view class="shoppingCarPage">
    <view class="shoppingCarHeader">
      <view class="headerItem"></view>
      <view :class="`headerItem ${isEdit ? 'save' : 'edit'}`" @tap="setIsEdit"
        >{{ isEdit ? "保存" : "编辑" }}
      </view>
    </view>
    <view class="shoppingCarBodyWarper">
      <OrderList
        :list="$store.state.products.shoppingCarList"
        :selectedIds="selectedIds"
        :toggleSelect="toggleSelect"
        :canCountChange="true"
        :setCount="setCount"
      />
      <view class="selectedAll">
        <view
          :class="
            isSelectedAll
              ? 'shoppingCarCheckBox shoppingCarCheckBoxSelected'
              : 'shoppingCarCheckBox shoppingCarCheckBoxNoSelected'
          "
          @tap="handleSelectedAll"
        >
        </view>
        <text class="selectedAlltext" @tap="handleSelectedAll"> 全选 </text>
      </view>
    </view>

    <view class="shoppingCarFooter">
      <view class="footerItem left" v-if="isEdit" />
      <view class="footerItem" v-if="isEdit" @tap="removeFromShoppingCar">
        <view class="bottomButton deleteButton">删除</view>
      </view>
      <view class="footerItem left" v-if="!isEdit" @tap="goOrder">
        <text class="label">合计:</text>
        <text class="price">{{ totalPriceString }}</text>
      </view>
      <view class="footerItem" v-if="!isEdit" @tap="goOrder">
        <view class="bottomButton">结算</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import { AtInputNumber } from "taro-ui-vue";
import OrderList from "../components/orderList/index.vue";
import {
  moneyFormat,
  getMainImageUrl,
} from "../../../services/products-service";
export default {
  components: { AtInputNumber, OrderList },
  data() {
    return {
      selectedIds: [],
      isEdit: false,
    };
  },
  computed: {
    isSelectedAll() {
      return (
        this.selectedIds.length &&
        this.selectedIds.length ===
          this.$store.state.products.shoppingCarList.length
      );
    },
    totalPrice() {
      const selectedProducts =
        this.$store.state.products.shoppingCarList.filter((item) =>
          this.selectedIds.some((id) => item.id === id)
        );
      const money = selectedProducts.reduce(
        (a, b) => a + b.price.money * b.count,
        0
      );
      const points = selectedProducts.reduce(
        (a, b) => a + b.price.points * b.count,
        0
      );
      return { money, points };
    },
    totalPriceString() {
      const { money, points } = this.totalPrice;
      return money ? `￥${moneyFormat(money)}` : points ? `${points}积分` : "";
    },
  },
  methods: {
    handleSelectedAll() {
      this.isSelectedAll ? this.clearSelected() : this.selectAll();
    },
    clearSelected() {
      this.selectedIds = [];
    },
    selectAll() {
      this.selectedIds = this.$store.state.products.shoppingCarList.map(
        ({ id }) => id
      );
    },
    removeFromShoppingCar() {
      this.$store.commit("removeFromShoppingCar", this.selectedIds);
    },
    toggleSelect(id) {
      if (this.selectedIds.find((i) => i === id)) {
        this.selectedIds = this.selectedIds.filter((i) => i !== id);
      } else {
        this.selectedIds.push(id);
      }
    },
    goOrder() {
      this.$store.commit(
        "goToProductOrder",
        this.$store.state.products.shoppingCarList.filter((item) =>
          this.selectedIds.some((id) => item.id === id)
        )
      );
      Taro.navigateTo({ url: "/pages/sales/order/confirm/index" });
    },
    setIsEdit() {
      this.isEdit = !this.isEdit;
    },
    setCount({ id, count }) {
      this.$store.commit("setCountFromShoppingCar", { id, count });
    },
    moneyFormat,
    getMainImageUrl,
  },
};
</script>
<style lang="scss">
@import "~taro-ui-vue/dist/style/components/input-number.scss";
@import "~taro-ui-vue/dist/style/components/icon.scss";
</style>